<template>
  <view class="detail-page">
    <tn-nav-bar alpha backTitle="">图库</tn-nav-bar>
    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
    </view>
    <view class="detail-header">
      <view class="detail-title">猫咪1</view>
      <view class="detail-date">2019年12月1日</view>
    </view>
    <view class="detail-img-wrap">
      <image class="detail-img" src="/static/image/damao.png" mode="aspectFill" />
    </view>
    <view style="position: fixed;bottom: 100rpx;">
      <scroll-view class="detail-thumb-bar" scroll-x>
        <view class="detail-thumb-list">
          <image v-for="(item, idx) in 12" :key="idx" class="detail-thumb" :src="'/static/image/damao.png'"
            mode="aspectFill" />
        </view>
      </scroll-view>
      <view class="detail-bottom-bar">

        <text class="tn-icon-share-square detail-bottom-icon" @click="showShare = true"
          style="margin-right: 100rpx;"></text>
        <view>
          <text class="tn-icon-download-simple detail-bottom-icon" @click="downloadImage"
            style="margin-right: 45rpx;"></text>
          <text class="tn-icon-like  detail-bottom-icon" v-if="!isLike" @click="likeImage"></text>
          <text class="tn-icon-like-fill  detail-bottom-icon" style="color: brown;" v-else @click="likeImage"></text>



        </view>
        <text class="tn-icon-delete detail-bottom-icon" style="margin-left: 50rpx;" @click="deleteImage"></text>

      </view>
    </view>

    <tn-popup v-model="show" mode="bottom" borderRadius="50" closeBtn>
      <view class="pop-modal">
        <view class="pop-title">删除照片</view>
        <view class="pop-desc">此照片将在设备中删除，并无法找回。</view>
        <button class="pop-btn u-f-ajc" @click="show = false">取消</button>
        <view class="pop-btn-cancel" @click="onFormat">继续删除</view>
      </view>
    </tn-popup>

    <tn-popup v-model="showShare" mode="bottom" borderRadius="50" closeBtn>
      <view class="pop-modal">
        <view class="pop-title">分享至</view>

        <view class="share">
          <view class="share-item">
            <view class="share-icon wx">
              <image class="share-icon" src="@/static/image/icon/wx.png" mode="scaleToFill" />
            </view>
            <view class="share-text">微信好友</view>
          </view>
          <view class="share-item">
            <view class="share-icon qq">
              <image class="share-icon" src="@/static/image/icon/qq.jpg" mode="scaleToFill" />
            </view>
            <view class="share-text">QQ好友</view>
          </view>
          <view class="share-item">
            <view class="share-icon pyq">
              <image class="share-icon" src="@/static/image/icon/pyq.jpg" mode="scaleToFill" />
            </view>
            <view class="share-text">朋友圈</view>
          </view>
        </view>
      </view>
    </tn-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showShare: false,
      isLike: false,
      show: false
    }
  },
  methods: {
    deleteImage() {
      this.show = true
    },
    downloadImage() {
      console.log('下载图片')
    },
    likeImage() {
      this.isLike = !this.isLike
    }
  }
}
</script>

<style scoped>
.pop-btn-cancel {
  margin-top: 50rpx;
  color: #999;
  font-size: 28rpx;
}

.pop-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 48rpx 36rpx 40rpx 36rpx;
  box-sizing: border-box;
  width: 100vw;
  height: 280px;
  max-width: 700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pop-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #111;
  align-self: flex-start;
}

.pop-desc {
  margin-top: 35rpx;
  font-size: 26rpx;
  color: #888;
  margin-bottom: 70rpx;
  align-self: flex-start;
  line-height: 1.7;
}

.pop-btn {
  width: 100%;
  height: 88rpx !important;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  margin-top: 20rpx;
}

.detail-page {
  background: #fff;
  min-height: 100vh;
}

.detail-header {
  padding: 32rpx 24rpx 0 24rpx;
}

.detail-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #111;
  margin-bottom: 8rpx;
}

.detail-date {
  font-size: 24rpx;
  color: #888;
}

.detail-img-wrap {
  width: 100vw;

  height: 540rpx;
  margin: 240rpx 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-img {
  width: 100vw;
  height: 100%;
  object-fit: cover;

}

.detail-thumb-bar {
  width: 100vw;
  margin-top: 32rpx;
  white-space: nowrap;
  overflow-x: auto;
}

.detail-thumb-list {
  display: flex;
  align-items: center;
  padding: 0 12rpx;
}

.detail-thumb {
  width: 70rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin-right: 12rpx;
  object-fit: cover;
  border: 2rpx solid #eee;
  flex-shrink: 0;
}

.detail-bottom-bar {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 55rpx 0 0 0;
  background: #fff;
  z-index: 10;
}

.detail-bottom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
}

.detail-bottom-icon {
  width: 48rpx;
  height: 48rpx;
  font-size: 38rpx;
}

.share {
  display: flex;
  margin: 40rpx 0 0 0;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
}

.share-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin-bottom: 16rpx;
  color: #fff;
}

.share-text {
  color: #bbb;
  font-size: 28rpx;
  margin-top: 8rpx;
}
</style>
